// pages/main/index.js
var imgUrls = require('../../utils/data.js').tmpImgUrls_new
//获取应用实例
const app = getApp()

var util = require('../../utils/util.js')
console.log(util.initData)
var timestamp = +new Date()

Page({
  data: {
    textareaVal : '' , // 文本输入
    leftLen : 20 , // 计算出剩余可输入到字符 （ 1个字母算是0.5个字符 ）
    maxLen : '' , // 实际可输入字符maxlength
    textareaTmp: '', // 处理文本换行
    baseHeight : '27'  ,
    isMade:false , // 是否已经生成海报
    maskHidden: true,
    // 图片背景切换
    //http://image.artyears.cn/image/2017-05/c18e0a6b-0df9-feaa-e9e5-46b938766bc1.jpg?imageView2/q/50
    imgUrl: '' , // 当前要编辑的图片url
    _formType : '' , // 区别是 本地上传还是 模版选择的底图

    // 画布文本内容
    cardTitle : '' , // 活动标题
    cardDesc : '',  // 互动介绍
    qrcodeUrl: '', // 合成图底部 二维码 下载到本地
    photoImgInfo:{} ,
    fileWidth : 584, // 默认模版底图宽
    fileHeight: 940, // 默认模版底图高
    isGetSystemInfo : false ,
    systemInfo: app.globalData.sysInfo,
    cavasPhotoWidth : 0 ,
    cavasPhotoHeight : 0 ,
    photoCanvasUrl : '' , //本地图片canvas 合成图
    createFlag : -1, // 点击生定制日签
    flag: -1,// 根据背景图索引触发 生成新的日签的  标志
    qrCodeUrl: '', // 二维码链接
    originImg : '' ,
    mode : 2 
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    // 当前上下文
    var that = this
    
    var _from = options.from 
    var itemIndex 
    wx.showToast({
      title: '正布置场景...',
      duration: 3000,
      mask: true
    })
    var info =  wx.getSystemInfoSync()   
    console.log(info)
    this.setData({
      isGetSystemInfo : true ,
      systemInfo : info
    })

    this.setData({
      _formType: _from
    })
    if ( _from == 'tmp' ){
      itemIndex  = options.itemIndex
      that.setData({
        //imgUrl: imgUrls[itemIndex],
        flag: itemIndex ,

      })
      return 
      // 先下载到本地
      wx.downloadFile({
        url:  imgUrls[itemIndex],
        success: function (res) {
          that.setData({
            imgUrl: res.tempFilePath
          })
        }
      })
      wx.downloadFile({
        url: app.globalData.prefix + '/create/qrcode.png?abc=' + timestamp,
        success: function (res) {
          that.setData({
            qrcodeUrl: res.tempFilePath
          })
        }
      })
      wx.hideToast()
      return 
    }
    else if( _from == 'photo' ){
      var info = wx.getStorageSync('daySignTmp')
      wx.setStorageSync('daySign', info)
      // 从缓存中取出链接
      wx.getStorage({
        key: 'photoFile' ,
        success:function(res){
            that.setData({
              imgUrl : res.data ,
              originImg: res.data 
            })
            // wx.downloadFile({
            //   url: app.globalData.prefix + '/create/qrcode.png?abc=' + timestamp ,
            //   success: function (res) {
            //     that.setData({
            //       qrcodeUrl: res.tempFilePath
            //     })
            //   }
            // })
            wx.getImageInfo({
              src: res.data,
              success: function(res){
                console.log(res)
                wx.hideToast()
                var w = 584
                var h = 940
                that.setData({
                  fileWidth : res.width ,
                  fileHeight: res.height ,
                  photoInfo: res // width  height path
                },function(){
                  that.createPhotoFile(function(){
                    var flag = ++that.data.createFlag
                    console.log('flag', flag)
                    that.setData({
                      mode: 4 ,
                      createFlag: flag ,
                    })
                  })
                })
                console.log(res) // 不等于630  height
              },
              fail:function(){
                wx.hideToast()
              }
            })
        },
        fail:function(){
          this.setData({
            mode : 3
          })
        }
      })
    }else{
      var imgUrl = imgUrl ;

      var imgUrl = "https://image.artyears.cn/image/2017-05/c18e0a6b-0df9-feaa-e9e5-46b938766bc1.jpg?imageView2/q/50"
      wx.downloadFile({
        url: imgUrl,
        success: function (res) {
          that.setData({
            imgUrl: res.tempFilePath,
            originImg: res.tempFilePath
          })
        }
      })
      wx.downloadFile({
        url: app.globalData.prefix + '/create/qrcode.png?abc=' + timestamp,
        success: function (res) {
          that.setData({
            qrcodeUrl: res.tempFilePath
          })
        }
      })
      wx.hideToast()
    }
  
    //创建初始化图片
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {

    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },

  onUnload: function () {
    // 页面关闭

  },
  /*
     函数说明
     把textarea 自动换行的段落分割出来
     1.手动的归到数组1
     2.对 数组1 循环判断 每个元素 进行长度判断，大于12 个字符则分割一段，递归循环
     3.
  */
  watchLineCount(){
    var linecount = this.autoClipTheStr() 
    if (linecount.length == 6){
       wx.showModal({
         title: '小提示' ,
         content: '输入 6 行生成结果最优',
         showCancel : false 
       }) 
    }
  },
  autoClipTheStr(){
    var self = this
    var str = this.data.textareaTmp
    var renderClipArr = str.split('&') 

    var lastestArr = []
    var computedNewLine = function (str) {
      var numStr = 0
      var strArr = str.split('')
      var tmpArr = []
      strArr.forEach(function (val, key) {
        numStr += val
        
        var len = self.countLengthRE(numStr).len
        if (len >= 12) {
          tmpArr.push(numStr)
          numStr = ''
        }
        else if (key == strArr.length - 1) {
          tmpArr.push(numStr)
        }
      })
      // 最后成功分割的数组
      return tmpArr
    }
    renderClipArr.forEach(function(str, key){
      // 计算长度
      var len = self.countLengthRE(str).len
      if( len > 12 ){
        var res = computedNewLine(str)
        lastestArr = lastestArr.concat(res)
      }else{
        // 如果没有自动换则行合并
        lastestArr = lastestArr.concat(str)
      }
      
    })
    return lastestArr
  },
  countLengthRE(str){
    // 转换回车符号 为 & 
    str = str.replace(/[\r\n]/g , '&')
    var totalLen = 20  // 计算剩余字符
    var maxLen = 20 // 设置maxLen
    var repOne = /[0-9a-zA-Z|\s]/  // 字母数字 
    var repEnter = /[\&]/  // 换行符
    var strAttr = str.split('')
    var tmp = ''
    var len = 0
    if (strAttr.length == 0){
      return { 
        len : len ,
        leftLen : totalLen ,
        tmp: tmp ,
        maxLen: maxLen
       } 
    }else{
      strAttr.forEach(function(val, key){
        if ( repOne.test(val) ) {
          tmp+=val
          len+=0.5 
          maxLen+=0.5
        }
        else if (repEnter.test(val) ){
          tmp += '&'
          maxLen++
        }
        else{
          tmp += val
          len++ 
        }
      })
      // maxLen: Math.ceil(countData.maxLen), // 向上取 textarea最大字符 
      // leftLen: Math.floor(countData.leftLen) // 向下取 页面显示 剩余字符 
      return {
        len:len,
        leftLen: totalLen - len ,
        maxLen: maxLen ,
        tmp : tmp
      }
    }
  },
  // 监控textarea 字数变化
  bindTextAreaInput(e){
    var that = this 
    setTimeout(function(){
      // 画图前的一次手动换行处理
      var countData = that.countLengthRE(e.detail.value)
      if( countData.leftLen == -1 ){
        that.setData({
          textareaVal: this.data.textareaVal.substring(0, this.data.textareaVal.length - 1) ,
          maxLen: Math.ceil(countData.maxLen), // 向上取
          leftLen: Math.floor(0), // 向下取 
          textareaTmp: countData.tmp // 已处理手动换行的字符串
        })  
        return 
      }
      that.setData({
        maxLen: Math.ceil(countData.maxLen), // 向上取
        leftLen: Math.floor(countData.leftLen), // 向下取 
        textareaTmp : countData.tmp // 已处理手动换行的字符串
      })    
    },200)     

    this.setData({
      textareaVal: e.detail.value,
    })   
    // var _lastText = this.data.textareaLineChange.replace('&', '')
    // flag = this.data.textareaVal.indexOf(_lastText)
    // var len = this.data.textareaVal
    // if (flag > 0) {
    //   this.data.textareaVal.splice(flag, len)
    // }
  },
  //将金额绘制到canvas的固定
  setTitle: function (context, x, y) {
    var cardTitle = '#您的专属新年签#'
    // 样式设置
    context.setFontSize(16);
    context.setFillStyle("#ffffff");
    context.fillText(cardTitle, x + 63/2, y + 150/2);
    context.stroke();
  },
  //将姓名绘制到canvas的固定
  /*
    函数说明
    画中间对输入内容
    @params {Object} context 当前canvas对象
    @params {Num} screenWidth 屏幕宽度
    @params {Num}  x ：x方向的偏移量
    @params {Num}  y ：y方向的偏移量
  */
  setDesc: function (context ,screenWidth ,x , y) {
    var desc = this.data.textareaVal 
    var offset = ((21 + 10) / 375 * screenWidth)  
    var fontSize = ( 21 / 375  * screenWidth)  
    context.setFontSize( fontSize  )
    context.setFillStyle("#ffffff")
    // context.textBaseline = "middle";

    context.save()

    
    // 换行分隔数组
    var rows = this.autoClipTheStr()
    // 根据 换行分割 顺序画出文字换行
    this.drawText(rows, x + 63 / 2, y + 239 / 2, offset , context )
    //context.fillText(desc, 63/2, 239/2);//必须为（0,0）原点
    //this.drawText(testStr, 63 / 2, 239 / 2, 502 / 750 * screenWidth ,context)    
  },
  /*
    函数说明 drawText
    根据参数对数组元素进行 -- 换行画出
    @params {Object} rows 换行分割数组, 画出对效果：一个元素占一行
    @params {Num}  x ：x方向的初始偏移量
    @params {Num}  y ：y方向的初始偏移量
    @params {Num}  y ：y方向的行距偏移量
    @params {Object} context 当前canvas对象
  */  
  drawText(rows, x, y, offset, context) {
    for (var b = 0; b < rows.length; b++) {
      context.fillText(rows[b], x, y + b  * (offset) );
    }
    context.restore();
    context.stroke();
  },
  /*
    函数说明 
    判断是否 本地图片做模版底图
    进行不同的步骤合成
  */  
  beforeCreate(){
    wx.showToast({
      title: '正生成日签',
      icon: 'loading',
      duration: 3000
    })
    var that = this 
    this.setData({
      isSkip : true
    })
    var _flag = ++this.data.createFlag 
    if( this.data._formType =='photo' ){
      this.createPhotoFile(function(){
        that.setData({
          createFlag: _flag
        })  
      })
    }else{
      this.setData({
        createFlag: _flag
      })  
    }
    
    


    return 
    var that = this 
    // 没输入内容不能生成海报
    if (!this.data.textareaVal) {
      wx.showModal({
        title: '小提示',
        content: '快来输入你的那句话吧！',
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
      return
    }else{
      // 敏感词过滤
      // /v1/wechat/filterText?text = xxx
      var submitData = util.initData   
      submitData.data = { 
        text: this.data.textareaVal
      }
      wx.request({
        //填写自己的鉴权服务器地址
        url: 'https://m.youyinian.cn/v1/common/filterText',
        method: 'POST',
        data: submitData ,
        success: function (cosRes) {
          var str = cosRes.data.data.result
          if (str == that.data.textareaVal ){
            if (that.data._formType == 'photo') {
              that.createPhotoFile(that.createNewImg)
            } else {
              that.createNewImg()
            } 
          }else{
            wx.showToast({
              title: '失败啦，请重试',
              icon : 'loading'
            })
          }
          console.log()
        }
      })    
      

    }
    
  },
  /*
      函数说明 createPhotoFile 
      * 对本地图片进行裁剪 和 生成前的展示一样
      @params {Fuction} callback 本地图片进行裁剪后 再下一步 画剩余的文字和二维码
  */
  createPhotoFile: function (callback){
    wx.showToast({
      title: '正布置画布...',
      icon: 'loading',
      duration: 2000
    });
    var that = this    
    var path = this.data.originImg
    var photoInfo = this.data.photoInfo
    // 手机设备参数
    var sysInfo = this.data.systemInfo
    var screenWidth = sysInfo.windowWidth
    var screenHeight = sysInfo.windowHeight
    var rate = (screenWidth / 750)
    var pW = that.data.fileWidth
    var pH = that.data.fileHeight
    // photoW : 手机实际显示本地图片长度
    //var photoW = pW /2 
    var photoW = pW * rate 
    //var photoH = pH /2
    var photoH = pH * rate
    // ????? -110  1210- 890-210 = 110
    var screenRadio = (1210 - 110) / 750
    //var widthRadio = 630 / 750
    var widthRadio = 584 / 750
    var wh = screenWidth * widthRadio
    // 从模版选择的图层 宽高
    var longH = 940 / 750 * screenWidth
    var context = wx.createCanvasContext('myphoto');
    // 从相册或者拍照生成 
    // var offsetX = (photoW - 630/2 )/2 
    var offsetX = 0
    // if ( 548 > pW ){
    //   offsetX = ( screenWidth - pW )/2 
    // } 
    // else if (548 < pW ){
    //   offsetX = (pW - screenWidth  ) / 2 
    // }
    
    var offsetX = (  screenWidth - 584 *rate  )/2 
    
     // 生成底板
    context.setFillStyle('white')
    
    context.fillRect(0, 0, screenWidth, screenHeight)
    var photoTop = 0 
    var photoLeft = 0
    if (photoH < 940 *rate ){
      photoTop = 0
      //photoTop = (940 * rate - photoH)/2
    }
    else if (photoH > screenHeight ){
      photoTop = (screenHeight - photoH) / 2
    }
    if (photoW < 750 * rate) {
      photoLeft = (screenWidth - photoW) / 2
    }
    else if (photoW > 750 * rate ){
      photoLeft = (screenWidth - photoW) / 2
    }


    context.drawImage(path, photoLeft, photoTop , photoW, photoH)
    //context.restore()
    context.draw()

    setTimeout(function () {
      // 根据设置参数导图（裁剪）
      wx.canvasToTempFilePath({
        canvasId: 'myphoto',
        x: offsetX,
        y: 0,
        width: 584 * rate,
        height: 940 * rate,
        success:function(res) {
          // wx.showToast({
          //   title: '正在生成海报2222...',
            
          //   duration: 2000
          // });
          
            console.log(res.tempFilePath)
            that.setData({
              photoCanvasUrl: res.tempFilePath,
              imgUrl: res.tempFilePath
            },function(){
              // 执行 后面的文字 与 二维码合成
              var flag = ++that.data.createFlag
              console.log('flag', flag)
              that.setData({
                mode: 4,
                createFlag: flag,
              })
               //callback && callback()
            })
              
            
        },fail: function(res){
          console.log(res)
        }
      })    
    },200)                   
      
  },
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function () {
   
    if( this.data._formType != 'photo' ){
      wx.showToast({
        title: '正在生成海报...',
        icon: 'loading',
        duration: 1500
      });
    }
    
    var that = this
    var context = wx.createCanvasContext('mycanvas');
    var path = this.data.imgUrl
    var pixelRatio = 2
    
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    //不知道是什么原因，手机环境能正常显示
    
        var sysInfo = this.data.systemInfo
        var defaultWidth = 750
        var defaultHeight = 1210
        // 底板
        var screenWidth = sysInfo.windowWidth
        var screenHeight = sysInfo.windowHeight
        // ????? -110  1210- 890-210 = 110
        var screenRadio = (1210 - 110) / 750 
        // 白色底板相对 屏幕居中 
        // 白色底板高度
        var boardHeight  = screenWidth * screenRadio
        // 02-08 兼容 iphonex 
        // var outerOffsetTop = (boardHeight - screenWidth * screenRadio) / 2
        var outerOffsetTop = (screenHeight - screenWidth * screenRadio) / 2
        // 底图距离上方距离
        var isPhoneX = sysInfo.model.indexOf('iPhone X') > -1 
          console.log(isPhoneX)
        // (兼容iphonex)
        if (isPhoneX) {
          outerOffsetTop -= 80
        }
        console.log(outerOffsetTop)
        context.setFillStyle('white')
        context.fillRect(0, outerOffsetTop, screenWidth, boardHeight)
        // 计算底图居中参数
        var widthRadio = 630 / 750
        var wh = screenWidth * widthRadio
        var centerOffsetLeft = (screenWidth - wh) / 2 
        var offsetTop = (sysInfo.windowHeight * (107 / 2)) / defaultHeight  + outerOffsetTop
        console.log(offsetTop,111 )
        // 从模版选择的图层 宽高
        var longH = 890 / 750 * screenWidth
        var shortH = 122 / 750 * screenWidth
        /*  
            二维码 在下方居中
            白色底版高度 - 模版图 y方向偏移量 - 模版图 高度 - 二维码高度 = ¥  return （¥ ／2）
        */
        var qrcodeOffsetTop = (boardHeight - offsetTop + outerOffsetTop - longH - shortH) / 2  +  longH + offsetTop 
        if( that.data._formType == 'photo' ){
          context.drawImage(this.data.photoCanvasUrl , centerOffsetLeft, offsetTop, wh, longH);   
        }else{
          context.drawImage(path, centerOffsetLeft, offsetTop, wh, longH);    
        }
        console.log('qrcodeOffsetTop', qrcodeOffsetTop)
        //  本地qrcode
        // context.drawImage('../../images/qrcode.png', centerOffsetLeft, longH + offsetTop, wh, shortH)
        // cdn 的
        context.drawImage(that.data.qrcodeUrl, centerOffsetLeft, qrcodeOffsetTop , wh, shortH) 
        that.setTitle(context, centerOffsetLeft, offsetTop)
        that.setDesc(context, screenWidth, centerOffsetLeft, offsetTop)
        //绘制图片
        context.draw();
        //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
        setTimeout(function () {
          wx.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: function (res) {
              var tempFilePath = res.tempFilePath;
              wx.hideToast()
              wx.removeStorageSync('myposter')
              setTimeout(function(){
                wx.setStorageSync('myposter', tempFilePath)
                wx.navigateTo({
                  // 与 from=share 从分享链接进来 区别开来
                  url: '/pages/complete/index?from=create&offsetLeft=' + centerOffsetLeft + '&offsetTop=' + offsetTop + '&tmpHeight=' + (isPhoneX ? longH - 9 + 'px' : '891rpx') + '&tmpWidth=' + wh,
                  success: function () {
                    console.log('turn to create')
                  }
                })
              },200)
              
            },
            fail: function (res) {
              
            }
          });
        }, 200);  
  },
  
  //点击图片进行预览，长按保存分享图片
  previewImg: function (e) {
    var img = this.data.imagePath
    wx.previewImage({
      current: img, // 当前显示图片的http链接
      urls: [img] // 需要预览的图片http链接列表
    })
  },
  successCreate(obj) {
    console.log(obj.detail)
    var that = this 
    var tmpUrl = obj.detail.tempFilePath
    wx.hideToast()
    wx.removeStorageSync('myposter')
    console.log('create success')
    if(this.data.isSkip){
      console.log('isSkip true')
      wx.setStorage({
        key: 'myposter',
        //.replace('wxfile','http')
        data: tmpUrl,
        success: function () {
          console.log('poster success')
          // 手机设备参数
          var sysInfo = that.data.systemInfo
          // 底图距离上方距离
          var isPhoneX = sysInfo.model.indexOf('iPhone X') > -1
          wx.hideToast() 
          wx.navigateTo({
            // 与 from=share 从分享链接进来 区别开来
            url: '/pages/complete/index?from=create' + '&tmpHeight=' + (isPhoneX ? longH - 9 + 'px' : '940rpx') + '&tmpWidth=584rpx',
            success: function () {
              console.log('turn to create')
            }
          })
        }
      })
    }
   else{
      this.setData({
        imgUrl: tmpUrl
      })
   }
    
  }
  
})